<template>
  <div v-if="show" class="container" :class="{overlay: show}">
    <div class="dialog">
      <main>
        <p class="title">{{ title }}</p>
        <p class="content">{{ content }}</p>
      </main>
      <div class="confirm-container">
        <p class="yes" @click="yes">确认</p>
        <p class="no" @click="no">取消</p>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "w-dialog",
  props: {
    // 标题
    title: {
      type: String,
      default: '标题'
    },
    // 内容
    content:{
      type: String,
      default: '这是一段描述内容'
    }
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    showDialog() {
      this.show = true
    },
    yes() {
      this.show = false
    },
    no() {
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.dialog{
  background-color: #fff;
  width: 8rem;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: .4rem;
  p{
    text-align: center;
  }
}
main{
  padding: .4rem;
  .title{
    line-height: .8rem;
  }
}
.confirm-container{
  display: flex;
  border-radius: 0 0 .4rem .4rem;
  border: 1px solid #ebedf0;
  p{
    width: 50%;
    padding: .4rem 0;
  }
  .yes{
    border-right: 1px solid #ebedf0;
    color: #ee0a24;
    border-radius: 0 0 0 .4rem;
    &:active{
      background-color: #e6e6e6;
    }
  }
  .no{
    border-radius: 0 0 .4rem 0;
    &:active{
      background-color: #e6e6e6;
    }
  }
}
</style>